.media-card {
  display: inline-block;
  width: 300px;
  line-height: initial;
  padding: 10px;
  border: 2px solid #efeff2;
  border-radius: 4px;
  overflow: hidden;

  .media-item {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #efeff2;
    align-content: center;
    align-items: center;
    // cursor: move;

    .item-title {
      flex: 1;
      padding-right: 6px;
      text-align: left;
      font-size: 14px;
      color: #343434;
    }

    .item-cover {
      position: relative;
      width: 40px;
      height: 40px;
      border: 1px solid #efeff2;
      overflow: hidden;

      .cover-img {
        position: absolute;
        transform: translateX(-50%);
        top: 0;
        height: 100%;
      }

    }

    &.first {
      position: relative;
      display: block;
      padding: 0;
      border-bottom: none;

      .item-title {
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 6px;
        text-align: left;
        font-size: 14px;
        color: #fff;
      }

      .item-cover {
        position: relative;
        width: 100%;
        padding-bottom: 42.66666667%;
        overflow: hidden;

        .cover-img {
          position: absolute;
          z-index: 0;
          transform: translateX(-50%);
          top: 0;
          height: 100%;
        }

        .cover-mask {
          position: absolute;
          z-index: 0;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: linear-gradient(transparent, rgba(0, 0, 0, .4));
        }

      }

    }

    &:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }

  }

}
